<template>
  <getBack></getBack>

  <div class="login">
    <div class="box">
      <h2>欢迎来到住宿预订平台</h2>

      <el-form
        class="form"
        :model="ruleForm"
        :rules="rules"
        ref="loginFormRef"
        hide-required-asterisk
      >
        <el-form-item label="账号" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="pass">
          <el-input v-model="ruleForm.pass" show-password placeholder="请输入密码"></el-input>
        </el-form-item>

        <!-- <el-form-item>
          <div
            class="controls"
            style="display: flex; justify-content: space-between; align-items: center; width: 100%"
          >
            <el-checkbox v-model="keepPwd">记住密码</el-checkbox>
            <el-link type="primary">忘记密码</el-link>
          </div>
        </el-form-item> -->
        <!-- <el-form-item>
          <el-button class="btn" type="primary" @click="submitFormLogin">登录</el-button>
        </el-form-item> -->
      </el-form>
      <el-button class="btn" type="primary" @click="submitFormLogin">登录</el-button>

      <div class="reg">
        <span>还有没有账号？请</span>
        <span style="color: blue" @click="routerJump('replace', 'Register')">注册</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CACHE_ACCOUNT, CACHE_KEEPPWD, CACHE_PASSWORD } from "@/global/constants"
import useRouterJump from "@/hooks/useRouterJump"
import useValidator from "@/hooks/useValidator"
import useLoginStore from "@/store/login/login"
import { localCache } from "@/utils/cacheData"
import { messageReminder } from "@/utils/notificationHint"
import type { FormInstance } from "element-plus"
import { reactive, ref } from "vue"
import { useRoute } from "vue-router"

const keepPwd = ref<boolean>(localCache.getCache(CACHE_KEEPPWD) ?? false)
const localName = localCache.getCache(CACHE_ACCOUNT)
const localPass = localCache.getCache(CACHE_PASSWORD)

const ruleForm = reactive({
  name: localName ?? "",
  pass: localPass ?? ""
})

// 引验证的hook函数
const { rules } = useValidator(ruleForm)

const route = useRoute()
// 引用路由跳转的hook函数
const { router, routerJump } = useRouterJump()

const loginStore = useLoginStore()

const loginFormRef = ref<FormInstance>()
// 登录的提交
function submitFormLogin() {
  loginFormRef.value?.validate(async (valid) => {
    if (valid) {
      // 全部表单验证成功，在向服务器发请求，进行注册
      // const { name, pass } = this.ruleForm;
      const { name, pass } = ruleForm
      loginStore
        .loginAction({ account: name, password: pass }, keepPwd.value)
        .then(() => {
          messageReminder({ message: "登录成功！", type: "success" })
          // routerJump("back")
          const redirect = route.query.redirect || "/"
          router.push(redirect)
        })
        .catch((err) => {
          messageReminder({ message: `登录失败！${err}`, type: "error" })
        })
    } else {
      // alert("请仔细校对输入的信息！")
      messageReminder({ message: "提交失败！请仔细校对输入的信息！", type: "warning" })
      return false
    }
  })
}

// 缓存记录一下是否保存密码  --> 也可以将逻辑写到store里面
// watch(
//   keepPwd,
//   (newValue) => {
//     console.log(CACHE_KEEPPWD, newValue)
//     localCache.setCache(CACHE_KEEPPWD, newValue)
//   },
//   {
//     immediate: true // 立即监听一次
//   }
// )

const emit = defineEmits(["handleSwitchPage"])
function switchPage() {
  emit("handleSwitchPage", "paneLogin")
}
</script>

<style lang="less" scoped>
.login {
  height: 100%;
  // width: 100vw;
  overflow: hidden;
  background-image: url(../../assets/images/login_bg.jpg);
  background-size: 100%;
  color: #666;
  align-items: center;
  display: flex;
  justify-content: center;
  .box {
    text-align: center;
    background-color: white;
    height: 350px;
    width: 500px;
    border-radius: 20px;
    position: relative;
    .form {
      position: absolute;
      top: 30%;
      left: 50%;
      width: 80%;
      transform: translateX(-50%);
    }
    h2 {
      margin-top: 35px;
    }
    .btn {
      position: absolute;
      width: 70%;
      bottom: 90px;
      left: 80px;
    }
    .reg {
      position: absolute;
      font-size: 12px;
      bottom: 60px;
      right: 50px;
      cursor: pointer;
    }
  }
}
</style>
